<template>
	<view class="user-index-page uu-user-top">
		<view class="user-content">
			<image v-if="isLogin" :src="userInfo.avatar"></image>
			<image v-else src="https://oss.yzroom.com/attach/2023/09/037ec202309261116556509.png"></image>
			<view class="not-login" v-if="!isLogin" @click="login">立即登录</view>
			<view v-else class="has-login">
				<navigator url="/pages/lease/personal_Info" class="name" hover-class="none">{{userInfo.nickname}}</navigator>
				<!-- <navigator url="/pages/lease/mine_integral" class="integral" hover-class="none">
					<image src="../../static/images/icon/coin.png"></image>
					<text>7486</text>
				</navigator> -->
			</view>
			<view class="message" @click="goMenuPage('/pages/lease/msg-list')">
				<view class="msg-count">
					<view class="count" v-if="userInfo.msg_no_read > 0">{{userInfo.msg_no_read}}</view>
					<image src="../../static/images/icon/bell.png"></image>
				</view>
			</view>
		</view>
		
		<view class="num-content">
			<view class="left-box">
				<!-- <view class="item">
					<view class="num">0</view>
					<view class="name">余额</view>
				</view> -->
				<!-- </navigator> -->
				<view class="item">
					<!-- <navigator url="/pages/lease/mine_integral" class="item" hover-class="none"> -->
					<view class="num">0</view>
					<view class="name">积分</view>
					<!-- </navigator> -->
				</view>
				<view class="item" @click="goMenuPage('/pages/users/user_coupon/index')">
					<view class="num">{{ userInfo.coupon_num || 0 }}</view>
					<view class="name">优惠券</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="right-box" @click="goMenuPage('/pages/lease/my-bill')">
				<image src="https://oss.yzroom.com/attach/2023/12/c53b520231222144904259.png"></image>
				<view class="name">我的账单</view>
			</view>
		</view>
		
		<!-- <view class="section-box">
			<view class="head">
				<view class="title">租赁订单</view>
				<view class="read-more" @click="goMenuPage('/pages/goods/order_list/index?status=')">
					<text>全部订单</text>
					<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
				</view>
			</view>
			
			<view class="list">
				<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=11')">
					<view class="pic">
						<image src="../../static/images/ic-dsh.png"></image>
					</view>
					<view class="name">待审核</view>
				</view>
				<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=0')">
					<view class="pic">
						<image src="../../static/images/ic-dfk.png"></image>
					</view>
					<view class="name">待付款</view>
				</view>
				<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=12')">
					<view class="pic">
						<image src="../../static/images/ic-dfh.png"></image>
					</view>
					<view class="name">待发货</view>
				</view>
				<view class="item" @click="goMenuPage('/pages/goods/order_list/index?status=2')">
					<view class="pic">
						<image src="../../static/images/ic-sh.png"></image>
					</view>
					<view class="name">待收货</view>
				</view>
			</view>
		</view> -->
		
		<view class="user-ad" @click="goSpu()">
			<image style="border-radius: 16rpx;" src="https://jipinzulin.oss-cn-beijing.aliyuncs.com/attach/2023/06/2667f202306161932018489.png"></image>
		</view>
		
		
		<view class="uu-box">
			<view class="uu-list">
				
				<view v-if="isLogin && userInfo && userInfo.is_credit" @click="gotUserCredit()" class="uu-item bottom-line">
					<view class="left">
						<view class="pic">
							<image src="../../static/images/ic-channel-c.png"></image>
						</view>
						<view class="name">待签授权书</view>
					</view>
					<view style="display: flex;">
						<view v-if="isLogin && userInfo">
							<view v-if="isLogin && userInfo.credit_status" style="color: #999;">查看</view>
							<view v-else style="color: #FF1F2E;">立即去填写</view>
						</view>
						<image style="height: 30rpx;width: 30rpx;margin-left: 16rpx;" src="../../static/images/icon-right.png"></image>
					</view>
				</view>
				
				<view @click="goMenuPage('/pages/lease/share_user')" class="uu-item bottom-line">
					<view class="left">
						<view class="pic">
							<image src="../../static/images/ic-channel4.png"></image>
						</view>
						<view class="name">推荐好友</view>
					</view>
					<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
				</view>
				
				<view @click="goMenuPage('/pages/users/user_address_list/index')" class="uu-item bottom-line">
					<view class="left">
						<view class="pic">
							<image src="../../static/images/ic-channel5.png"></image>
						</view>
						<view class="name">收货地址</view>
					</view>
					<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
				</view>
				
				<view @click="goMenuPage('/pages/lease/real-name')" class="uu-item bottom-line">
					<view class="left">
						<view class="pic">
							<image src="../../static/images/ic-channel2.png"></image>
						</view>
						<view class="name">实名认证</view>
					</view>
					
					<view style="display: flex;">
						<view v-if="isLogin && userInfo">
							<view v-if="isLogin && userInfo.is_attestation" style="color: #999;">已实名</view>
							<view v-else style="color: #FF1F2E;">实名后可更快出审核结果</view>
						</view>
					
						<image style="height: 30rpx;width: 30rpx;margin-left: 16rpx;" src="../../static/images/icon-right.png"></image>
					</view>
					
				</view>
				
				<navigator url="/pages/lease/flow-path" class="uu-item bottom-line" hover-class="none">
					<view class="left">
						<view class="pic">
							<image src="../../static/images/ic-channel7.png"></image>
						</view>
						<view class="name">租机流程</view>
					</view>
					<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
				</navigator>
				
				<view @click="goMenuPage('/pages/lease/service')" class="uu-item bottom-line">
					<view class="left">
						<view class="pic">
							<image src="../../static/images/ic-channel9.png"></image>
						</view>
						<view class="name">客服&建议</view>
					</view>
					<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
				</view>
				
				<navigator url="/pages/lease/about_us" class="uu-item bottom-line" hover-class="none">
					<view class="left">
						<view class="pic">
							<image src="../../static/images/ic-channel10.png"></image>
						</view>
						<view class="name">关于我们</view>
					</view>
					<image style="height: 30rpx;width: 30rpx;" src="../../static/images/icon-right.png"></image>
				</navigator>
			</view>
		</view>
		
		<!-- <view class="section-box">
			<view class="head">
				<view class="title">我的服务</view>
			</view>
			
			<view class="list">
				<view @click="goMenuPage('/pages/lease/real-name')" class="item">
					<view class="pic">
						<image src="../../static/images/ic-channel2.png"></image>
					</view>
					<view class="name">实名认证</view>
				</view>
				 <view @click="goMenuPage('/pages/lease/my-bankcard')" class="item" >
					<view class="pic">
						<image src="../../static/images/ic-channel3.png"></image>
					</view>
					<view class="name">我的银行卡</view>
				</view>
				<view @click="goMenuPage('/pages/lease/share_user')" class="item">
					<view class="pic">
						<image src="../../static/images/ic-channel4.png"></image>
					</view>
					<view class="name">推荐好友</view>
				</view>
				<view @click="goMenuPage('/pages/users/user_address_list/index')" class="item">
					<view class="pic">
						<image src="../../static/images/ic-channel5.png"></image>
					</view>
					<view class="name">收货地址</view>
				</view>
				<view @click="goMenuPage('/pages/lease/linkman')" class="item" >
					<view class="pic">
						<image src="../../static/images/ic-channel6.png"></image>
					</view>
					<view class="name">紧急联系人</view>
				</view>
			
				<navigator url="/pages/lease/flow-path" class="item" hover-class="none">
					<view class="pic">
						<image src="../../static/images/ic-channel7.png"></image>
					</view>
					<view class="name">租机流程</view>
				</navigator>
				<navigator url="/pages/lease/service" class="item" hover-class="none">
					<view class="pic">
						<image src="../../static/images/ic-channel9.png"></image>
					</view>
					<view class="name">客服&建议</view>
				</navigator>
				<navigator url="/pages/lease/about_us" class="item" hover-class="none">
					<view class="pic">
						<image src="../../static/images/ic-channel10.png"></image>
					</view>
					<view class="name">关于我们</view>
				</navigator>
			</view>
		</view> -->
		<authorize v-if="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
	</view>
</template>

<script>
	let app = getApp();
	import store from "../../store";
	import {
		getUserCredit,
		getUserInfo,
		getNoReadCount
	} from '@/api/user.js';
	import { productYanxuan } from "@/api/brandHall.js"
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters(['isLogin']),
		data() {
			return {
				appType: app.globalData.appType,
				isShowAuth: false, //是否隐藏授权
				userInfo: null,
				list: []
			}
		},
		onLoad() {
			this.getProductYanxuan()
		},
		
		onShow() {
			let that = this;
			if (this.isLogin) {
				getUserInfo().then(res => {
					that.userInfo = res.data
				})
				
				if (this.appType == 1) {
					getNoReadCount().then(res => {
						if (res.data[0] > 0) {
							uni.showTabBarRedDot({
								index: 2
							})
						} else {
							uni.hideTabBarRedDot({
								index: 2
							})
						}
					})
				}
			}
		},
		methods: {
			getProductYanxuan() {
				productYanxuan().then(res => {
					this.list = res.data.list;
				})
			},
			goSpu() {
				
				if (this.list.length > 0) {
					const id = this.list[0].id
					uni.navigateTo({
						url: '/pages/goods_details/index?id=' + id
					})
				}
				// uni.navigateTo({
				// 	url: "/pages/module/new"
				// })
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			login() {
				this.isShowAuth = true;
			}, 
			user() {
				my.getAuthUserInfo({
					success: (res) => {
						console.log(res)
					},
					fail: err => console.log(err)
				})
					
			},
			onLoadFun() {
				console.log('onLoadFun')
				this.getUserInfo();
				this.isShowAuth = false
			},
			/**
			 * 获取用户信息
			 * 
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
					if (that.appType == 1) {
						if (that.userInfo.msg_no_read > 0) {
							uni.showTabBarRedDot({
								index: 2
							})
						} else {
							uni.hideTabBarRedDot({
								index: 2
							})
						}
					}
				})
			},
			goMenuPage(url) {
				if (this.isLogin) {
					
						// store.commit("LOGOUT");
					
					uni.navigateTo({
						url: url
					})
				} else {
					this.isShowAuth = true;
				}
			},
			gotUserCredit() {
				uni.showLoading({
					title: '加载中'
				})
				getUserCredit().then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						
						uni.navigateTo({
							url: `/pages/annex/web_view/index?url=${res.data.contract_url}`
						});
					} else {
						uni.hideLoading()
						return that.$util.Tips({
							title: res.msg
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background-color: #F5F7FA; }
	.user-index-page {
		background-image: url('https://wap.yqjy8.vip/uploads/attach/2023/05/20230514/3f564154bd9e114000ba90ad91834f97.png');
		background-size: 100%;
		background-color: #F5F7FA;
		background-repeat: no-repeat;
		padding: 224rpx 24rpx 48rpx 24rpx;
		
		.user-content {
			display: flex;
			align-items: center;
			
			image {
				width: 104rpx;
				height: 104rpx;
				border-radius: 52rpx;
			}
			
			.not-login {
				flex: 1;
				margin-left: 24rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #1F1F1F;
			}
			
			.has-login {
				flex: 1;
				margin-left: 24rpx;
				
				.name {
					margin-top: 8rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 40rpx;
				}
				
				.integral {
					display: inline-block;
					padding: 4rpx 6rpx;
					margin-top: 16rpx;
					background: rgba(255,255,255,0.4);
					height: 32rpx;
					border-radius: 16rpx;
					border: 1rpx solid #FFFFFF;
					display: flex;
					align-items: center;
					
					image {
						width: 24rpx;
						height: 24rpx;
					}
					
					text {
						margin: 0 4rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #FF9233;
					}
				}
			}
			
			.message {
				text-align: right;
				
				.msg-count {
					position: relative;
					width: 72rpx;
					height: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.count {
						position: absolute;
						right: 0;
						top: 0;
						line-height: 30rpx;
						width: 30rpx;
						font-size: 24rpx;
						border-radius: 15rpx;
						color: #fff;
						background-color: #FF271F;
						text-align: center;
					}
					
					image {
						display: inline-block;
						width: 56rpx;
						height: 56rpx;
					}
				}
				
				
			}
		}
	
		.num-content {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			width: 100%;
			height: 144rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.left-box {
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex: 1;
				
				.item {
					flex: 1;
					// width: 144rpx;
					text-align: center;
					
					.num {
						font-size: 40rpx;
						font-weight: bold;
						color: #1F1F1F;
						line-height: 40rpx;
					}
					
					.name {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						line-height: 24rpx;
					}
				}
			}
			
			.line {
				width: 2rpx;
				height: 48rpx;
				background: #D8D8D8;
			}
			
			.right-box {
				width: 172rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				
				image {
					margin: 0 auto;
					width: 40rpx;
					height: 40rpx;
				}
				
				.name {
					width: 100%;
					margin-top: 16rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
					text-align: center;
				}
			}
		}
	
		.user-ad {
			margin-top: 24rpx;
			width: 100%;
			height: 160rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	
	
		.uu-box {
			padding: 0 24rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}
	
		.section-box {
			padding: 32rpx 24rpx;
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			
			.head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #1F1F1F;
					line-height: 32rpx;
				}
				
				.read-more {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					display: flex;
					align-items: center;
					
					.icon-right {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		
			.list {
				display: flex;
				flex-wrap: wrap;
				
				.item20 {
					margin-top: 32rpx;
					width: 20%;
					text-align: center;
					
					.pic {
						margin: 0 auto;
						width: 80rpx;
						height: 80rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.name {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #1F1F1F;
						line-height: 24rpx;
					}
				}
				
				
				.item {
					margin-top: 32rpx;
					width: 25%;
					text-align: center;
					
					.pic {
						margin: 0 auto;
						width: 80rpx;
						height: 80rpx;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.name {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #1F1F1F;
						line-height: 24rpx;
					}
				}
			}
		}
	}
	
	.uu-list {
		.uu-item {
			height: 120rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			.left {
				display: flex;
				flex-direction: row;
				align-items: center;
				.pic {
					width: 48rpx;
					height: 48rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.name {
					font-size: 28rpx;
					color: #1F1F1F;
					margin-left: 30rpx;
				}
				
			}
			
			.icon-right {
				width: 28rpx;
				height: 28rpx;
			} 
		}
	}
	
	.bottom-line {
		border-bottom: 1px solid #F5F5F5;
	}
</style>
